The Box Model

The Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of margin, border, padding, and the actual content.

• CSS Box Model - w3schools (opens new window)
• The Box Model - MDN (opens new window)
• Video: The Box Model in Devtools (opens new window)
• Video: The Box Model History - Wikipedia (opens new window)

---

box-sizing

How the total size of the box is calculated:

• box-sizing: content-box width (height) = width(height) + padding + border. (this is the default).

• box-sizing: border-box. include the padding and border in an element's total width and height. Recommended (include in CSS reset)

• Box sizing - w3schools (opens new window)

• Box-Sizing - MDN (opens new window)

• Paul Irish - Box Sizing (opens new window)

• Box sizing best practice - CSS Tricks (opens new window)

  html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  

---